<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 4.1.4 Floating Elements</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta http-equiv="Content-Style-Type" content="text/css">
			
			<link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
				<style type="text/css">
					HR.minor {clear: both; width: 5%;}
					HR.major {clear: both; width: 75%; margin: 1.5em;}
					DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
					P.left, P.right {width: 10em; padding: 1em; margin: 0;
						border: 1px solid lime; background-color: silver;}
				IMG.left, IMG.right {margin: 0; border: 3px solid black;}
				.left {float: left;}
				.right {float: right;}
					</style></head>

<body><p>The style declarations which apply to the text below are:</p>
	<pre>HR.minor {clear: both; width: 5%;}
		HR.major {clear: both; width: 75%; margin: 1.5em;}
		DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
		P.left, P.right {width: 10em; padding: 1em; margin: 0;
		border: 1px solid lime; background-color: silver;}
		IMG.left, IMG.right {margin: 0; border: 3px solid black;}
		.left {float: left;}
		.right {float: right;}
		
	</pre>
	<hr>
	<p> On this test page, each test is performed once with floating
	paragraphs, and then again with floating images.  Other than the
	substitution of images for pargraphs, the structure of the test is
	exactly the same, including the direction of the floats. </p>
	
	
	<hr class="major">
	
	<div>
		<p class="left">This is a left-floating paragraph (first in source).</p>
		<p class="right">This is a right-floating paragraph (second in source).</p>
		This is text within the DIV.  The floating elements within this DIV
		should not go beyond the left or right inner edge of this DIV, which
		means that the borders of the floating elements should not overlap the
		top or side borders of the DIV. </div>
	<hr class="minor">
	<div>
		<img src="../resources/vblank.gif" class="left">
			<img src="../resources/vblank.gif" class="right"> This is text within
				the DIV.  The floating images within this DIV should not go beyond the
				left or right inner edge of this DIV, which means that the borders of
				the floating images should not overlap the top or side borders of the
				DIV. </div>
	
	<hr class="major">
	
	<div style="width: 27em;">
		<p class="left">This is the first left-floating paragraph.</p>
		<p class="left">This is the second left-floating paragraph.</p>
		<p class="left">This is the third left-floating paragraph.</p> This is
		text within the DIV.  The floating elements within this DIV should not
		go beyond the left or right inner edge of this DIV, which means that
		the borders of the floating elements should not overlap the top or side
		borders of the DIV in any way.  In addition, they should not overlap
		each other.  The first two should be side by side, whereas the third
		should be on the next "line." </div>
	<hr class="minor">
	<div style="width: 350px;">
		<img src="../resources/hblank1.gif" class="left" width="150" height="30">
			<img src="../resources/hblank2.gif" class="left" width="150" height="30">
				<img src="../resources/hblank2.gif" class="left" width="150" height="30">
					This is text within the DIV.  The floating images within this DIV should
					not go beyond the left or right inner edge of this DIV, which means
					that the borders of the floating images should not overlap the top or
					side borders of the DIV in any way.  In addition, they should not
					overlap each other.  The first two should be side by side, whereas the
					third should be on the next "line." </div>
	
	<hr class="major">
	
	<div style="width: 19em;">
		<p class="left">This is a left-floating paragraph (first in source).</p>
		<p class="right">This is a right-floating paragraph (second in source).</p>
		This is text within the DIV.  The floating elements within this DIV
		should not go beyond the left or right inner edge of this DIV, which
		means that the borders of the floating elements should not overlap the
		top or side borders of the DIV in any way.  In addition, they should
		not overlap each other in any way, nor should the floated elements be
		overwritten by the DIV text.  In addition, the floated elements should
		not be side-by-side, but instead the first should be floated left, and
		the second floated to the right below the first. </div>
	<hr class="minor">
	<div style="width: 400px;">
		<img src="../resources/hblank1.gif" class="left" width="250">
			<img src="../resources/hblank2.gif" class="right" width="250"> This is
				text within the DIV.  The floating images within this DIV should not go
				beyond the left or right inner edge of this DIV, which means that the
				borders of the floating images should not overlap the top or side
				borders of the DIV in any way.  In addition, they should not overlap
				each other in any way, nor should the floated elements be overwritten
				by the DIV text.  In addition, the floated images should not be
				side-by-side, but instead the first should be floated left, and the
				second floated to the right below the first. </div>
	
	<hr class="major">
	
	<div>
		<p class="right">This is a right-floating paragraph (first in source).</p>
		<p class="left">This is a left-floating paragraph (second in source).</p>
		This is text within the DIV.  The floating elements within this DIV
		should not go beyond the top side of this DIV, which means that the
		borders of the floating elements should not overlap the top or side
		borders of the DIV in any way.  In addition, the top of the
		left-floating box should not be higher than the top of the
		right-floating box. </div>
	<hr class="minor">
	<div>
		<img src="../resources/vblank.gif" class="left">
			<img src="../resources/vblank.gif" class="right"> This is text within
				the DIV.  The floating images within this DIV should not go beyond the
				top side of this DIV, which means that the borders of the floating
				images should not overlap the top or side borders of the DIV in any
				way.  In addition, the top of the left-floating image should not be
				higher than the top of the right-floating image. </div>
	
	<hr class="major">
	
	<div>
		This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
		The floating elements within this DIV should not go any higher than the
		line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
		This means that the top side of each float can be, at most, as high as
		the top edge of the inline element containing the content just before
		the floating elements occur in the source.  In order to mark these
		points clearly, an asterisk has been inserted just before each floated
		element. </div>
	<hr class="minor">
	<div>
		This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
			The floating images within this DIV should not go any higher than the
			line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> This means that the
				top side of each float can be, at most, as high as the top edge of the
				inline element containing the content just before the floating images
				occur in the source.  In order to mark these points clearly, an
				asterisk has been inserted just before each floated image. </div>
	
	<hr class="major">
	
	<div>
		This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
		The floating elements within this DIV should not go any higher than the
		line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
		This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
		at most, as high as the top edge of the inline element containing the
		content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
		In order to mark these points clearly, an asterisk has been inserted
		just before each floated element.  If a line has room for a floated
		element, then the element should float so that its top is aligned with
		the top of the line-box in which the asterisk appears.  Otherwise, its
		top should align with the top of the next line-box. </div>
	<hr class="minor">
	<div>
		This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
			The floating images within this DIV should not go any higher than the
			line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
				This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
					at most, as high as the top edge of the inline element containing the
					content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
						In order to mark these points clearly, an asterisk has been inserted
						just before each floated image.  If a line has room for a floated
						image, then the image should float so that its top is aligned with the
						top of the line-box in which the asterisk appears.  Otherwise, its top
						should align with the top of the next line-box. </div>
	
	<hr class="major">
	
	<div style="width: 30em;">
		This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
		text within the DIV.  Under CSS1, the left floating element should be
		placed in the upper left corner of the DIV, and the purple border of
		the DIV should abut the green border of the floating element.
		Similarly, the right floating element should be placed in the upper
		right corner of the DIV, and the purple border of the DIV should abut
		the green border of the floating element. The text of the DIV element
		should flow between and under the two floating elements. The two
		asterisk characters mark the insertion points of the floating elements.
		It is expected that, under future specifications, it may be acceptable
		for the top of floated elements to align with the top of the line-box
		following the insertion point of the floated element to avoid floating
		elements appearing before text which precedes it in the source
		document. </div>
	<hr class="minor">
	<div style="width: 30em;">
		This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
			text within the DIV.  Under CSS1, the left floating image should be
			placed in the upper left corner of the DIV, and the purple border of
			the DIV should abut the green border of the floating image.  Similarly,
			the right floating image should be placed in the upper right corner of
			the DIV, and the purple border of the DIV should abut the green border
			of the floating image. The text of the DIV element should flow between
			and under the two floating image. The two asterisk characters mark the
			insertion points of the floating image.  It is expected that, under
			future specifications, it may be acceptable for the top of floated
			elements to align with the top of the line-box following the insertion
			point of the floated element to avoid floating elements appearing
			before text which precedes it in the source document. </div>
	
	<hr class="major">
	
	
	<table border="1" cellspacing="0" cellpadding="3" class="tabletest">
		<tbody><tr>
			<td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
		</tr>
		<tr>
			<td bgcolor="silver">†</td>
			<td><p> On this test page, each test is performed once with floating
				paragraphs, and then again with floating images.  Other than the
				substitution of images for pargraphs, the structure of the test is
				exactly the same, including the direction of the floats. </p>
				
				
				<hr class="major">
				
				<div>
					<p class="left">This is a left-floating paragraph (first in source).</p>
					<p class="right">This is a right-floating paragraph (second in source).</p>
					This is text within the DIV.  The floating elements within this DIV
					should not go beyond the left or right inner edge of this DIV, which
					means that the borders of the floating elements should not overlap the
					top or side borders of the DIV. </div>
				<hr class="minor">
				<div>
					<img src="../resources/vblank.gif" class="left">
						<img src="../resources/vblank.gif" class="right"> This is text within
							the DIV.  The floating images within this DIV should not go beyond the
							left or right inner edge of this DIV, which means that the borders of
							the floating images should not overlap the top or side borders of the
							DIV. </div>
				
				<hr class="major">
				
				<div style="width: 27em;">
					<p class="left">This is the first left-floating paragraph.</p>
					<p class="left">This is the second left-floating paragraph.</p>
					<p class="left">This is the third left-floating paragraph.</p> This is
					text within the DIV.  The floating elements within this DIV should not
					go beyond the left or right inner edge of this DIV, which means that
					the borders of the floating elements should not overlap the top or side
					borders of the DIV in any way.  In addition, they should not overlap
					each other.  The first two should be side by side, whereas the third
					should be on the next "line." </div>
				<hr class="minor">
				<div style="width: 350px;">
					<img src="../resources/hblank1.gif" class="left" width="150" height="30">
						<img src="../resources/hblank2.gif" class="left" width="150" height="30">
							<img src="../resources/hblank2.gif" class="left" width="150" height="30">
								This is text within the DIV.  The floating images within this DIV should
								not go beyond the left or right inner edge of this DIV, which means
								that the borders of the floating images should not overlap the top or
								side borders of the DIV in any way.  In addition, they should not
								overlap each other.  The first two should be side by side, whereas the
								third should be on the next "line." </div>
				
				<hr class="major">
				
				<div style="width: 19em;">
					<p class="left">This is a left-floating paragraph (first in source).</p>
					<p class="right">This is a right-floating paragraph (second in source).</p>
					This is text within the DIV.  The floating elements within this DIV
					should not go beyond the left or right inner edge of this DIV, which
					means that the borders of the floating elements should not overlap the
					top or side borders of the DIV in any way.  In addition, they should
					not overlap each other in any way, nor should the floated elements be
					overwritten by the DIV text.  In addition, the floated elements should
					not be side-by-side, but instead the first should be floated left, and
					the second floated to the right below the first. </div>
				<hr class="minor">
				<div style="width: 400px;">
					<img src="../resources/hblank1.gif" class="left" width="250">
						<img src="../resources/hblank2.gif" class="right" width="250"> This is
							text within the DIV.  The floating images within this DIV should not go
							beyond the left or right inner edge of this DIV, which means that the
							borders of the floating images should not overlap the top or side
							borders of the DIV in any way.  In addition, they should not overlap
							each other in any way, nor should the floated elements be overwritten
							by the DIV text.  In addition, the floated images should not be
							side-by-side, but instead the first should be floated left, and the
							second floated to the right below the first. </div>
				
				<hr class="major">
				
				<div>
					<p class="right">This is a right-floating paragraph (first in source).</p>
					<p class="left">This is a left-floating paragraph (second in source).</p>
					This is text within the DIV.  The floating elements within this DIV
					should not go beyond the top side of this DIV, which means that the
					borders of the floating elements should not overlap the top or side
					borders of the DIV in any way.  In addition, the top of the
					left-floating box should not be higher than the top of the
					right-floating box. </div>
				<hr class="minor">
				<div>
					<img src="../resources/vblank.gif" class="left">
						<img src="../resources/vblank.gif" class="right"> This is text within
							the DIV.  The floating images within this DIV should not go beyond the
							top side of this DIV, which means that the borders of the floating
							images should not overlap the top or side borders of the DIV in any
							way.  In addition, the top of the left-floating image should not be
							higher than the top of the right-floating image. </div>
				
				<hr class="major">
				
				<div>
					This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
					The floating elements within this DIV should not go any higher than the
					line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
					This means that the top side of each float can be, at most, as high as
					the top edge of the inline element containing the content just before
					the floating elements occur in the source.  In order to mark these
					points clearly, an asterisk has been inserted just before each floated
					element. </div>
				<hr class="minor">
				<div>
					This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
						The floating images within this DIV should not go any higher than the
						line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> This means that the
							top side of each float can be, at most, as high as the top edge of the
							inline element containing the content just before the floating images
							occur in the source.  In order to mark these points clearly, an
							asterisk has been inserted just before each floated image. </div>
				
				<hr class="major">
				
				<div>
					This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
					The floating elements within this DIV should not go any higher than the
					line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
					This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
					at most, as high as the top edge of the inline element containing the
					content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
					In order to mark these points clearly, an asterisk has been inserted
					just before each floated element.  If a line has room for a floated
					element, then the element should float so that its top is aligned with
					the top of the line-box in which the asterisk appears.  Otherwise, its
					top should align with the top of the next line-box. </div>
				<hr class="minor">
				<div>
					This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
						The floating images within this DIV should not go any higher than the
						line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
							This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
								at most, as high as the top edge of the inline element containing the
								content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
									In order to mark these points clearly, an asterisk has been inserted
									just before each floated image.  If a line has room for a floated
									image, then the image should float so that its top is aligned with the
									top of the line-box in which the asterisk appears.  Otherwise, its top
									should align with the top of the next line-box. </div>
				
				<hr class="major">
				
				<div style="width: 30em;">
					This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
					text within the DIV.  Under CSS1, the left floating element should be
					placed in the upper left corner of the DIV, and the purple border of
					the DIV should abut the green border of the floating element.
					Similarly, the right floating element should be placed in the upper
					right corner of the DIV, and the purple border of the DIV should abut
					the green border of the floating element. The text of the DIV element
					should flow between and under the two floating elements. The two
					asterisk characters mark the insertion points of the floating elements.
					It is expected that, under future specifications, it may be acceptable
					for the top of floated elements to align with the top of the line-box
					following the insertion point of the floated element to avoid floating
					elements appearing before text which precedes it in the source
					document. </div>
				<hr class="minor">
				<div style="width: 30em;">
					This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
						text within the DIV.  Under CSS1, the left floating image should be
						placed in the upper left corner of the DIV, and the purple border of
						the DIV should abut the green border of the floating image.  Similarly,
						the right floating image should be placed in the upper right corner of
						the DIV, and the purple border of the DIV should abut the green border
						of the floating image. The text of the DIV element should flow between
						and under the two floating image. The two asterisk characters mark the
						insertion points of the floating image.  It is expected that, under
						future specifications, it may be acceptable for the top of floated
						elements to align with the top of the line-box following the insertion
						point of the floated element to avoid floating elements appearing
						before text which precedes it in the source document. </div>
				
				<hr class="major">
			</td></tr></tbody></table></body></html>